import style from '../css/Outpatientregistration.module.scss'
import { Form, Input, Radio, Select, DatePicker, Cascader, Flex, Button, Modal, message, Empty } from 'antd'
import type { CascaderProps } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import cashImg from '../assets/cashpay.png'
import {  departlists, doctorlists, patientlistsinserts, patientmedical, registerlist, schedutimes } from '../utils/request';
import dayjs from 'dayjs';
function Outpatientregistration() {
    const [form] = Form.useForm();
    interface Option {
        value: string;
        label: string;
        children?: Option[];
    }
    const options: Option[] = [
        {
            value: '河北省',
            label: '河北省',
            children: [
                {
                    value: '石家庄市',
                    label: '石家庄市',
                    children: [
                        {
                            value: '长安区',
                            label: '长安区',
                        },
                        {
                            value: '桥西区',
                            label: '桥西区',
                        },
                        {
                            value: '新华区',
                            label: '新华区',
                        },
                    ],
                },
                {
                    value: '唐山市',
                    label: '唐山市',
                    children: [
                        {
                            value: '路南区',
                            label: '路南区',
                        },
                        {
                            value: '路北区',
                            label: '路北区',
                        },
                        {
                            value: '古冶区',
                            label: '古冶区',
                        },
                    ],
                },
            ],
        },
        {
            value: '浙江省',
            label: '浙江省',
            children: [
                {
                    value: '杭州市',
                    label: '杭州市',
                    children: [
                        {
                            value: '上城区',
                            label: '上城区',
                        },
                        {
                            value: '下城区',
                            label: '下城区',
                        },
                        {
                            value: '江干区',
                            label: '江干区',
                        },
                    ],
                },
                {
                    value: '宁波市',
                    label: '宁波市',
                    children: [
                        {
                            value: '海曙区',
                            label: '海曙区',
                        },
                        {
                            value: '江北区',
                            label: '江北区',
                        },
                        {
                            value: '北仑区',
                            label: '北仑区',
                        },
                    ],
                },
            ],
        },
        {
            value: '江苏省',
            label: '江苏省',
            children: [
                {
                    value: '南京市',
                    label: '南京市',
                    children: [
                        {
                            value: '玄武区',
                            label: '玄武区',
                        },
                        {
                            value: '秦淮区',
                            label: '秦淮区',
                        },
                        {
                            value: '建邺区',
                            label: '建邺区',
                        },
                    ],
                },
                {
                    value: '无锡市',
                    label: '无锡市',
                    children: [
                        {
                            value: '锡山区',
                            label: '锡山区',
                        },
                        {
                            value: '惠山区',
                            label: '惠山区',
                        },
                        {
                            value: '滨湖区',
                            label: '滨湖区',
                        },
                    ],
                },
                {
                    value: '徐州市',
                    label: '徐州市',
                    children: [
                        {
                            value: '鼓楼区',
                            label: '鼓楼区',
                        },
                        {
                            value: '云龙区',
                            label: '云龙区',
                        },
                    ],
                },
                {
                    value: '常州市',
                    label: '常州市',
                },
            ],
        },
        {
            value: '安徽省',
            label: '安徽省',
            children: [
                {
                    value: '合肥市',
                    label: '合肥市',
                    children: [
                        {
                            value: '瑶海区',
                            label: '瑶海区',
                        },
                        {
                            value: '庐阳区',
                            label: '庐阳区',
                        },
                        {
                            value: '蜀山区',
                            label: '蜀山区',
                        },
                    ],
                },
                {
                    value: '芜湖市',
                    label: '芜湖市',
                    children: [
                        {
                            value: '镜湖区',
                            label: '镜湖区',
                        },
                        {
                            value: '鸠江区',
                            label: '鸠江区',
                        },
                        {
                            value: '弋江区',
                            label: '弋江区',
                        },
                    ],
                },
                {
                    value: '蚌埠市',
                    label: '蚌埠市',
                    children: [
                        {
                            value: '龙子湖区',
                            label: '龙子湖区',
                        },
                        {
                            value: '蚌山区',
                            label: '蚌山区',
                        },
                        {
                            value: '禹会区',
                            label: '禹会区',
                        },
                    ],
                },
            ],
        },
        {
            value: '四川省',
            label: '四川省',
            children: [
                {
                    value: '成都市',
                    label: '成都市',
                    children: [
                        {
                            value: '锦江区',
                            label: '锦江区',
                        },
                        {
                            value: '青羊区',
                            label: '青羊区',
                        },
                        {
                            value: '金牛区',
                            label: '金牛区',
                        },
                        {
                            value: '武侯区',
                            label: '武侯区',
                        },
                        {
                            value: '成华区',
                            label: '成华区',
                        },
                        {
                            value: '龙泉驿区',
                            label: '龙泉驿区',
                        },
                        {
                            value: '青白江区',
                            label: '青白江区',
                        },
                        {
                            value: '新都区',
                            label: '新都区',
                        },
                        {
                            value: '温江区',
                            label: '温江区',
                        },
                        {
                            value: '双流区',
                            label: '双流区',
                        },
                        {
                            value: '郫都区',
                            label: '郫都区',
                        },
                        {
                            value: '新津区',
                            label: '新津区',
                        },
                    ],
                },
                {
                    value: '自贡市',
                    label: '自贡市',
                    children: [
                        {
                            value: '自流井区',
                            label: '自流井区',
                        },
                        {
                            value: '贡井区',
                            label: '贡井区',
                        },
                        {
                            value: '大安区',
                            label: '大安区',
                        },
                    ],
                },
                {
                    value: '攀枝花市',
                    label: '攀枝花市',
                    children: [
                        {
                            value: '东区',
                            label: '东区',
                        },
                        {
                            value: '西区',
                            label: '西区',
                        },
                        {
                            value: '仁和区',
                            label: '仁和区',
                        },
                    ],
                },
                {
                    value: '泸州市',
                    label: '泸州市',
                    children: [
                        {
                            value: '江阳区',
                            label: '江阳区',
                        },
                        {
                            value: '纳溪区',
                            label: '纳溪区',
                        },
                        {
                            value: '龙马潭区',
                            label: '龙马潭区',
                        },
                    ],
                },
                {
                    value: '德阳市',
                    label: '德阳市',
                    children: [
                        {
                            value: '旌阳区',
                            label: '旌阳区',
                        },
                        {
                            value: '罗江区',
                            label: '罗江区',
                        },
                    ],
                },
                {
                    value: '广元市',
                    label: '广元市',
                    children: [
                        {
                            value: '利州区',
                            label: '利州区',
                        },
                        {
                            value: '昭化区',
                            label: '昭化区',
                        },
                    ],
                },
            ],
        },
    ];
    const onChange: CascaderProps<Option>['onChange'] = (value) => {
        console.log(value);
    };
    const next = ():void =>{
        console.log('下一个')
        if(Selectdate<6){
            setSelectdate((Selectdate) => Selectdate + 1)
        }else{
            setSelectdate(0)
        }
        
    }
    const preav = (): void => {
        console.log('上一个')
        if(Selectdate>0){
            setSelectdate((Selectdate) => Selectdate - 1)
        }else{
            setSelectdate(6)
        }
        
    }
    // 读卡区域
    // 读身份证
    const readId = () => {
        console.log('读身份证')
    }
    // 读医保卡
    const medicalinsurance = () => {
        console.log('读医保卡')
    }
    // 新建患者
    const insert = () => {
        console.log('新建患者,患者登记页面')
    }
    // 挂号医生

    const [departlist,setDepartlists] = useState([
        {
            depart:'',
            depart_id:1
        }
    ])
    const [doctorlist,setDoctorlist] = useState([{
        name:'',
        avator:'',
        call:'',
        doctor_id:1,
        price:0,
        depart:''
    }])
    //选择科室
    const [depart, setDepart] = useState(0)
    const [doctor, setDoctor] = useState(0)
    // 获取今日日期和7天的日期数组
    // 定义日期和星期的类型
    interface DayInfo {
        date: string;
        weekDay: string;
        isToday: boolean;
    }
    // 手动映射星期数字到中文大写
    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const getNext7Days = (): DayInfo[] => {
        const today = dayjs();
        const daysArray: DayInfo[] = [];

        for (let i = 0; i < 7; i++) {
            const currentDate = today.add(i, 'day');
            const formattedDate = currentDate.format('YYYY-MM-DD');
            const weekDay = weekDays[currentDate.day()];
            const isToday = i === 0;
            daysArray.push({ date: formattedDate, weekDay, isToday });
        }

        return daysArray;
    };
    const [days, setDays] = useState<DayInfo[]>([]);
    // 选择挂号科室
    useEffect(()=>{
        // 查询科室
        departlists().then(res=>{
            setDepartlists(res.data)
            // setSelDepart(res.data[0].depart)
        }).catch(err=>{
            console.log(err)
        })
        // 查询医生
        doctorlists({
            id:1
        }).then(res=>{
            setDoctorlist(res.data)
            setSeldoctor(res.data[0])
        }).catch(err=>{
            console.log(err)
        })
        
    },[])
    
    // 确认挂号
    // const [loading, setLoading] = useState(false)
    const [patientID,setPatientID] = useState(0)    //患者id
    const [patientinfo,setPatientInfo] = useState({
        name:''
    })
    const confirm = () => {
        form.validateFields().then(values => {
            if(codesource.length==0 || codesource[Selectdate]==undefined){
                message.warning('请先选择医生挂号时段')
            }else{
                setChosepay(0)
                setConfirmregistration(true)
                // console.log('Validated values: ', values);
                setPatientInfo(values)
                patientmedical({
                    ...values
                }).then(res=>{
                    if(res.data[0].patient_id){
                        setPatientID(res.data[0].patient_id)
                    }else{
                        setPatientID(0)
                    }
                    
                }).catch(err=>{
                    console.log(err,99999)
                    setPatientID(0)
                })
            }
            
        }).catch(info => {
            console.log('Validate Failed:', info);
        });
    }
    // 重置
    const reset = () => {
        console.log('重置')
        form.resetFields();
        setDepart(0)
        setDoctor(0)
        setSelectdate(0)
        setTimearea(0)
    }
    // 排班日历
    const [Selectdate,setSelectdate] = useState(0)

   
    const [chosepay,setChosepay] = useState(0)
    const [Confirmregistration,setConfirmregistration] = useState(false)
    useEffect(()=>{
        if(chosepay==0 || chosepay==2){
            setConfigamtext('确认挂号')
        }else if(chosepay==1 || chosepay==3){
            setConfigamtext('已完成扫码')
        }
    },[chosepay])
    // 确认挂号对话框造作
    const [registerloding,seRregisterloading] = useState(false)
    const [configamtext,setConfigamtext] = useState('确认挂号')
    // 取消挂号对话框
    const registerCancel=()=>{
        console.log('取消挂号')
        seRregisterloading(false)
        setConfirmregistration(false)
    }
    // 确认挂号对话框
    const registerOK=()=>{
        // console.log('确认挂号')
        // console.log('挂号医生排班时间段id',codesource[Selectdate].TimeCount_id)
        setConfigamtext('验证中')
        seRregisterloading(true)
        setTimeout(() => {
            if(chosepay==0 || chosepay==2){
                setConfigamtext('确认挂号')
            }else if(chosepay==1 || chosepay==3){
                setConfigamtext('已完成扫码')
            }
            
            if(patientID){
                
                // console.log('患者id',patientID)
                // console.log('患者挂号信息',patientinfo)
                // console.log('挂号时间',timeslot)
                // console.log('挂号医生',doctorlist[doctor].name)
                // console.log('挂号科室',doctorlist[doctor].depart)
                // console.log('挂号日期',timeslot.split(' ')[0])
                registerlist({
                    ...patientinfo,
                    department:doctorlist[doctor].depart,
                    doctor:doctorlist[doctor].name,
                    money:doctorlist[doctor].price.toFixed(2),
                    status:'待就诊',
                    date:timeslot,
                    patient_id:patientID,
                    timecountid:codesource[Selectdate].TimeCount_id
                }).then(res=>{
                    if(res.data.status==200){
                        setDepart(0)
                        setDoctor(0)
                        setSelectdate(0)
                        setTimearea(0)
                        schedutimes({
                            doctorID:1
                        }).then(res=>{
                            setCodesource(res.data)
                            setDays(getNext7Days())
                            setTimeslot(getNext7Days()[0].date+' '+'8:00-9:00')
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                    seRregisterloading(false)
                    setConfirmregistration(false)
                    setResultshow(true)
                }).catch(err=>{
                    console.log(err)
                })
            }else{
                console.log('新增获取患者id',patientinfo)
                patientlistsinserts(patientinfo).then(res=>{
                    setPatientID(res.data.data.insertId)
                    registerlist({
                        ...patientinfo,
                        department:doctorlist[doctor].depart,
                        doctor:doctorlist[doctor].name,
                        money:doctorlist[doctor].price.toFixed(2),
                        status:'待就诊',
                        date:timeslot,
                        patient_id:res.data.data.insertId,
                        timecountid:codesource[Selectdate].TimeCount_id
                    }).then(res=>{
                        console.log(res)
                        seRregisterloading(false)
                        setConfirmregistration(false)
                        setResultshow(true)
                    }).catch(err=>{
                        console.log(err)
                    })
                }).catch(err=>{
                    console.log(err)
                })
                
            }
           
            
        }, 2000);
    }
    // 挂号结果对话框
    const [resultshow,setResultshow] = useState(false)
    // 继续挂号
    const continues=()=>{
        console.log('继续挂号') 
        setResultshow(false)  
    }


    // 选择排班时间
    const setselectdate = (i: number) =>{
        setSelectdate(i)
        setTimearea(0)
    }
    // 医生排班情况渲染
    const [codesource,setCodesource] = useState([
        {
            TimeCount_id:0,
            doctor_id:1,
            dates_id:1,
            timeOne:0,
            timeTwo:0,
            timeThree:0,
            timeFour:0,
            timeFive:0,
            timeSix:0,
            timeSeven:0,
            timeEight:0
        }
    ])  
    const [time,setTimearea] = useState<number>(0)  //时间段切换
    const [timeslot,setTimeslot] = useState('')     //挂号时间 
    const selectTime = (i:number,count:number,timeerre:string) =>{
        setTimearea(i)
        if(count==0){
            setTimeslot(timeslot)
            message.warning('此时间段挂号人数已达上限')
        }else{
            setTimeslot(days[Selectdate].date+' '+timeerre)
        }
    }
    // 选择挂号科室
    const setdepart = (i:any) => {
        setDepart(i)
        setDoctor(0)
        setSelectdate(0)
        setTimearea(0)
        doctorlists({
            id:(i+1)
        }).then(res=>{
            setDoctorlist(res.data)
            setSeldoctor(res.data[0])
        }).catch(err=>{
            console.log(err)
        })
    }
    // 选择挂号医生
    const [seldoctor,setSeldoctor] = useState({
        call:'',
        name:'',
        doctor_id:1
    })  //挂号医生
    useEffect(()=>{
        schedutimes({
            doctorID:seldoctor.doctor_id
        }).then(res=>{
            setCodesource(res.data)
            setDays(getNext7Days())
            setTimeslot(getNext7Days()[0].date+' '+'8:00-9:00')
        }).catch(err=>{
            console.log(err)
        })
    },[seldoctor])
    // const [seltime,setSeltime] = useState('')
    const setdoctor = (i: number) =>{
        setDoctor(i)
        setSeldoctor(doctorlist[i])
        setSelectdate(0)
        setTimearea(0)
    }

    // 病历号回车加载数据
    const medical = (event: any) =>{
        if(event.key=='Enter'){
            patientmedical({
                Medicalrecord:event.target.value
            }).then(res=>{
                if(res.data[0]){
                    form.setFieldsValue({
                        ...res.data[0],
                        birthDate:res.data[0].birthDate?dayjs(res.data[0].birthDate, 'YYYY-MM-DD'):'',
                        address:res.data[0].address.split(',')
                    })
                    setDoctor(0)
                    setSelectdate(0)
                    setDepart(0)
                    setTimearea(0)
                    setSelectdate(0)
                    setTimearea(0)
                }else{
                    form.resetFields()
                    message.warning('未查询到相关患者信息')
                }
                
            }).catch(err=>{
                console.log(err)
            })
        }
        
    }
    return (
        <>
            {/* 确认挂号支付弹窗 */}
            <Modal
                title='确认挂号'
                open={Confirmregistration}
                width={750}
                onCancel={registerCancel}
                footer={[
                    <Flex key='flex' justify='flex-end'>
                        <Button key="back" onClick={()=>registerCancel} style={{ height: 32, marginRight: 10 }}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" loading={registerloding} onClick={()=>registerOK()} style={{ height: 32 }}>
                            {configamtext}
                        </Button>,
                    </Flex>
                ]}
            >
                {/* 订单详情 */}
                <div className={style.orderdetails}>
                    <p className={style.title}>订单详情</p>
                    <ul className={style.detaillists}>
                        <li>
                            <p>挂号人：</p>
                            <p>{patientinfo.name}</p>
                        </li>
                        <li>
                            <p>挂号金额：</p>
                            <p>￥{doctorlist[doctor].price.toFixed(2)}</p>
                        </li>
                        <li>
                            <p>挂号科室：</p>
                            <p>{doctorlist[doctor].depart}</p>
                        </li>
                        <li>
                            <p>挂号医生：</p>
                            <p>{doctorlist[doctor].name}</p>
                        </li>
                        <li>
                            <p>挂号日期：</p>
                            <p>{timeslot.split(' ')[0]}</p>
                        </li>
                        <li>
                            <p>挂号时段：</p>
                            <p>{timeslot.split(' ')[1]}</p>
                        </li>
                        <li>
                            <p>挂号种类：</p>
                            <p>{doctorlist[doctor].call}号</p>
                        </li>
                    </ul>
                </div>
                {/* 支付方式 */}
                <div className={style.paymethods}>
                    <p className={style.title}>支付方式</p>
                    {/* 方式选择 */}
                    <ul className={style.methodschose}>
                        <li className={chosepay==0?style.payactive:''} onClick={()=>setChosepay(0)}>
                            <div className={style.cash}>
                                <img src={cashImg} alt="" />
                            </div>
                            <p>现金</p>
                        </li>
                        <li className={chosepay==1?style.payactive:''} onClick={()=>setChosepay(1)}>
                            <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3778.svg" alt="" />
                            <p>扫码支付</p>
                        </li>
                        <li className={chosepay==2?style.payactive:''} onClick={()=>setChosepay(2)}>
                            <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3790.svg" alt="" />
                            <p>一卡通</p>
                        </li>
                        <li className={chosepay==3?style.payactive:''} onClick={()=>setChosepay(3)}>
                            <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3790.svg" alt="" />
                            <p>医保支付</p>
                        </li>
                    </ul>
                </div>
                {/* 支付方式对应内容 */}
                <div className={style.paycountent}>
                    {/* 现金 */}
                    <Form className={chosepay==0?style.cash+' '+style.show:style.cash}>
                        <Form.Item label='应收金额'>
                            <Input style={{width:200,height:32,borderRadius:0,marginLeft:10,fontSize:13}} placeholder='请输入实收现金'></Input>
                        </Form.Item>
                        <Form.Item label='找零金额'>
                            <Input style={{width:200,height:32,borderRadius:0,marginLeft:10,fontSize:13}} placeholder='自动计算找零金额或手动输入'></Input>
                        </Form.Item>
                    </Form>
                    {/* 扫码支付 */}
                    <div className={chosepay==1?style.scancodepay+' '+style.show:style.scancodepay}>
                        <div className={style.scancode}>
                            <img className={style.code} src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3828.png" alt="" />
                            <div className={style.scancontent}>
                                <div className={style.meet}>
                                    <span>应付金额：</span>
                                    <span className={style.amount}>￥{doctorlist[doctor].price.toFixed(2)}</span>
                                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3826.svg" alt="" />
                                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3827.svg" alt="" />
                                </div>
                                <p className={style.payattention}>① 请将微信或支付宝支付二维码对准扫码口</p>
                                <p className={style.payattention}>② 或扫码左侧支付二维码进行支付</p>
                            </div>
                        </div>
                    </div>
                    {/* 一卡通 */}
                    <Form className={chosepay==2?style.smartcard+' '+style.show:style.smartcard}>
                        <Form.Item label='账户余额' style={{marginBottom:0}}>
                            <span style={{color:'#00A76F'}}>￥1000.00</span>
                        </Form.Item>
                        <Form.Item label='记账金额'>
                            <span style={{color:'#F59A23'}}>￥{doctorlist[doctor].price.toFixed(2)}</span>
                        </Form.Item>
                    </Form>
                    {/* 医保支付 */}
                    <div className={chosepay==3?style.medicalinsurance+' '+style.show:style.medicalinsurance}>
                        <Form style={{display:'flex',alignItems:'center'}}>
                            <Form.Item label='应付金额' style={{marginBottom:0,marginRight:30}}>
                                <span style={{color:'#F59A23'}}>￥{doctorlist[doctor].price.toFixed(2)}</span>
                            </Form.Item>
                            <Form.Item label='医保统筹支付' style={{marginBottom:0,marginRight:30}}>
                                <span style={{color:'#F59A23'}}>￥{(doctorlist[doctor].price*0.2).toFixed(2)}</span>
                            </Form.Item>
                            <Form.Item label='个人支付' style={{marginBottom:0}}>
                                <span style={{color:'#F59A23'}}>￥{(doctorlist[doctor].price*0.8).toFixed(2)}</span>
                            </Form.Item>
                        </Form>
                        <p className={style.medicalinsurance}>
                            <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E8%AE%BE%E8%AE%A1%E7%BB%84%E4%BB%B6/u257.svg" alt="" />
                            <span>请将医保卡放置到刷卡机上或出示电子医保二维码</span>
                        </p>
                    </div>
                </div>
            </Modal>
            {/* 挂号结果弹窗 */}
            <Modal
                title='挂号结果'
                width={750}
                open={resultshow}
                footer={false}
                onCancel={continues}
            >
                <div className={style.result}>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3875.svg" alt="" />
                    <p style={{fontSize:16,color:'#000',fontWeight:700,marginTop:10}}>挂号成功</p>
                    <p style={{color:'#aaa',marginTop:30}}>小票已自动打印，请及时取走</p>
                    <img style={{marginTop:40}} src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3877.svg" alt="" />
                </div>
                <div className={style.details}>
                    <p style={{marginRight:50}}>订单收据号：<span>DD20180606175013</span></p>
                    <p>订单金额：<span>￥{doctorlist[doctor].price.toFixed(2)}</span></p>
                </div>
                <Flex justify='center' style={{marginTop:50}}>
                    <Button type='primary' onClick={()=>continues()} style={{marginRight:20}}>继续挂号</Button>
                    <Button onClick={()=>continues()}>关闭</Button>
                </Flex>
            </Modal>
            {/* 读卡信息 */}
            <div className={style.readCard}>
                <div className={style.readId} onClick={() => readId()}>
                    <div className={style.icon}>
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2020.svg" alt="" />
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2021.svg" alt="" />
                    </div>
                    <span style={{ color: '#0468FF' }}>读身份证</span>
                </div>
                <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E8%AF%A6%E6%83%85/u2905.svg" alt="" className={style.splite} />
                <div className={style.readId} onClick={() => medicalinsurance()}>
                    <div className={style.iconcard}>
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3425.svg" alt="" />
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3426.svg" alt="" />
                    </div>
                    <span style={{ color: '#0468FF' }}>读医保卡</span>
                </div>
                <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E8%AF%A6%E6%83%85/u2905.svg" alt="" className={style.splite} />
                <div className={style.readId} onClick={() => insert()}>
                    <div className={style.newbuilt}>
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3431.svg" alt="" />
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3432.svg" alt="" />
                    </div>
                    <span style={{ color: '#0468FF' }}>新建患者</span>
                </div>
            </div>
            {/* 患者信息 */}
            <div className={style.PatientInformation}>
                <div className={style.title}>患者信息</div>
                <div className={style.formbox}>
                    <Form
                        form={form}
                        style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}
                        initialValues={{ sex: '男' }}
                    >
                        <Form.Item label="就诊卡号" name='Medicalcard' rules={[{
                            required: true
                        }]} className={style.itemstyle} colon={false}>
                            <Input allowClear  placeholder='回车加载数据' style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        <Form.Item label="病历号" name='Medicalrecord' rules={[{
                            required: true
                        }]} className={style.itemstyle} colon={false}>
                            <Input allowClear placeholder='回车加载数据' style={{ width: 230, height: 32 }} onKeyDown={(e)=>medical(e)} />
                        </Form.Item>
                        <Form.Item label="患者姓名" name='name' className={style.itemstyle} colon={false} rules={[{
                            required: true
                        }]}>
                            <Input allowClear placeholder='回车加载数据' style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 性别 */}
                        <Form.Item label="性别" name='sex' rules={[{
                            required: true
                        }]} className={style.itemstyle} colon={false}>
                            <Radio.Group style={{ width: 135, height: 32 }} block options={[
                                { label: '男', value: '男' },
                                { label: '女', value: '女' },
                            ]} optionType="button" />
                        </Form.Item>
                        {/* 证件类型 */}
                        <Form.Item label="证件类型" name='IDtype' rules={[{
                            required: true
                        }]} className={style.itemstyle} colon={false}>
                            <Select
                                allowClear
                                placeholder='请选择'
                                style={{ width: 230, height: 32 }}
                                options={[
                                    { value: '居民身份证', label: '居民身份证' },
                                    { value: '港澳通行证', label: '港澳通行证' },
                                    { value: '台湾通行证', label: '台湾通行证' },
                                    { value: '护照', label: '护照' },
                                    { value: '军官证', label: '军官证' },
                                    { value: '驾驶证', label: '驾驶证' },
                                    { value: '其他', label: '其他' },
                                ]}
                            />
                        </Form.Item>
                        {/* 证件号 */}
                        <Form.Item label="证件号" name='Idcard' rules={[{
                            required: true
                        }]} className={style.itemstyle} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 出生日期 */}
                        <Form.Item label="出生日期" name='birthDate' className={style.itemstyle} colon={false}>
                            <DatePicker placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 年龄 */}
                        <Form.Item label="年龄" name='age' rules={[{
                            required: true
                        }]} className={style.itemstyle} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 联系电话 */}
                        <Form.Item label="联系电话" name='phone' rules={[{
                            required: true
                        }]} className={style.itemstyle} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 现住地址 */}
                        <Form.Item label="现住地址" name="address" className={style.itemstyle} colon={false}>
                            <Cascader options={options} onChange={onChange} placeholder="请选择" className={style.options} style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 现住详细地址 */}
                        <Form.Item label="现住详细地址" name='nowDetail' rules={[{
                            required: true
                        }]} colon={false} className={style.detail}>
                            <Input placeholder='请输入' allowClear style={{ width: 625, height: 32 }} />
                        </Form.Item>
                        {/* 监护人关系 */}
                        <Form.Item label="监护人关系" name='relotion' rules={[{ required: false }]} colon={false} className={style.itemstyle}>
                            <Select
                                placeholder='请选择监护人关系'
                                options={[
                                    { value: '父母', label: '父母' },
                                    { value: '子女', label: '子女' },
                                    { value: '亲属', label: '亲属' },
                                    { value: '朋友', label: '朋友', },
                                    { value: '其他', label: '其他', },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="监护人" name='people' rules={[{ required: false }]} colon={false} className={style.itemstyle}>
                            <Input placeholder='请输入' />
                        </Form.Item>
                        <Form.Item label="监护人电话" name='guardianshipphone' rules={[{ required: false }]} colon={false} className={style.itemstyle}>
                            <Input placeholder='请输入' />
                        </Form.Item>
                    </Form>
                </div>
            </div>
            {/* 挂号信息 */}
            <div className={style.Registrationinformation}>
                <div className={style.title}>患者信息</div>
                <div className={style.formbox}>
                    <Form
                        form={form}
                        className={style.formbox}
                    >
                        <Flex align='center' justify='space-between' style={{ height: '100%' }}>
                            <Form.Item label='门诊类型' name='Outpatienttype' rules={[{
                                required: true
                            }]}>
                                <Select
                                    allowClear
                                    placeholder='请选择门诊类型'
                                    style={{ width: 230, height: 32 }}
                                    options={[
                                        { value: '普通门诊', label: '普通门诊' },
                                        { value: '急诊', label: '急诊' },
                                        { value: '慢病门诊', label: '慢病门诊' },
                                        { value: '儿童两病门诊', label: '儿童两病门诊' },
                                        { value: '简易门诊', label: '简易门诊' },
                                        { value: '特病门诊', label: '特病门诊' },
                                    ]}
                                />
                            </Form.Item>
                            <Form.Item label='费用类型' name='freetype' rules={[{
                                required: true
                            }]}>
                                <Select
                                    allowClear
                                    placeholder='请选择费用类型'
                                    style={{ width: 230, height: 32 }}
                                    options={[
                                        { value: '自费', label: '自费' },
                                        { value: '职工医保', label: '职工医保' },
                                        { value: '居民医保', label: '居民医保' },
                                        { value: '金保', label: '金保' },
                                        { value: '一卡通', label: '一卡通' },
                                        { value: '其他', label: '其他' },
                                    ]}
                                />
                            </Form.Item>
                            <Form.Item label='就诊类型' name='visittype' rules={[{
                                required: true
                            }]}>
                                <Select
                                    allowClear
                                    placeholder='请选择就诊类型'
                                    style={{ width: 230, height: 32 }}
                                    options={[
                                        { value: '初诊', label: '初诊' },
                                        { value: '复诊', label: '复诊' },
                                    ]}
                                />
                            </Form.Item>
                        </Flex>
                    </Form>
                </div>
            </div>
            {/* 挂号医生 */}
            <div className={style.register}>
                {/* 科室 */}
                <div className={style.department}>
                    <div className={style.title}>科室</div>
                    {/* 选择科室 */}
                    <div className={style.selectbox}>
                        <div className={style.input}>
                            <Input style={{ width: 269, height: 32, textAlign: 'center' }} placeholder='请输入...' prefix={<img src='https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3637.svg'></img>}></Input>
                        </div>
                        <ul className={style.departmentlists}>
                            {
                                departlist.map((item, index) =>
                                    <li className={index == depart ? style.avtive : ''} key={index} onClick={() => setdepart(index)}>{item.depart}</li>
                                )
                            }
                        </ul>
                    </div>
                </div>
                {/* 医生 */}
                <div className={style.department}>
                    <div className={style.title}>医生</div>
                    {/* 选择医生 */}
                    <div className={style.selectbox}>
                        <div className={style.input}>
                            <Input style={{ width: 269, height: 32, textAlign: 'center' }} placeholder='请输入...' prefix={<img src='https://cdn7.axureshop.com/demo2024/2321849/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u3637.svg'></img>}></Input>
                        </div>
                        <ul className={style.departmentlists}>
                            {
                                doctorlist.map((Item, index) =>
                                    <li key={index} onClick={() => setdoctor(index)} className={index == doctor ? style.avtive : ''}>
                                        <img src={Item.avator} alt="" />
                                        <span className={style.name}>{Item.name}</span>
                                        <span className={style.qualifications}>{Item.call}</span>
                                    </li>
                                )
                            }
                        </ul>
                    </div>
                </div>
                {/* 排班 */}
                <div className={style.Scheduling}>
                    {/* 表头 */}
                    <div className={style.Schedtitle}>
                        <span className={style.title} style={{ borderBottom: 'none' }}>排班</span>
                        <ul className={style.scodenumber}>
                            <li>
                                <span className={style.green}></span>
                                <span style={{ color: '#00a76f' }}>有号</span>
                            </li>
                            <li>
                                <span className={style.gray}></span>
                                <span style={{ color: '#aaa' }}>无号</span>
                            </li>
                        </ul>
                    </div>
                    {/* 排班日历 */}
                    {
                        codesource.length==0?<Empty style={{marginTop:'50px'}} />
                        :
                            <div>
                                <div className={style.Schedudata}>
                                    <LeftOutlined style={{ width: 25, justifyContent: 'center', cursor: 'pointer' }} onClick={() => preav()} />
                                    <ul className={style.datalists}>
                                        {
                                            days.map((item, index) => (
                                                <li key={index} onClick={() => setselectdate(index)} className={Selectdate == index ? style.active : ''}>
                                                    <p>{item.weekDay}</p>
                                                    <p>{item.date.split('-')[1] + '/' + item.date.split('-')[2]}</p>
                                                    {codesource[index] == undefined ?
                                                    <p className={style.gray}></p>
                                                    :
                                                    <p className={(codesource[index].timeOne + codesource[index].timeTwo + codesource[index].timeThree + codesource[index].timeFour + codesource[index].timeFive + codesource[index].timeSix + codesource[index].timeSeven + codesource[index].timeEight) != 0 ? style.green : style.gray}></p>}
                                                </li>
                                            ))
                                        }
                                    </ul>
                                    <RightOutlined style={{ width: 25, justifyContent: 'center', cursor: 'pointer' }} onClick={() => next()} />
                                </div>
                                {/* 挂号时间 */}
                                <div className={style.registertime}>
                                    <div className={style.morning}>
                                        <div className={style.timetitle}>
                                            <span className={style.time}>上午（08:00-12:00）</span>
                                            <span className={style.registertype}>挂号种类：{doctorlist[doctor].call}号</span>
                                            <span className={style.money}>￥{doctorlist[doctor].price.toFixed(2)}</span>
                                        </div>
                                        {
                                            codesource[Selectdate] == undefined ? <Empty style={{
                                                display:'flex',
                                                flexDirection:'column',
                                                alignItems:'center',
                                                height:'100%',
                                                marginTop:10
                                            }} imageStyle={{width:50,height:'auto'}}/>
                                                :
                                                <ul className={style.timebox}>
                                                    <li onClick={() => selectTime(0, codesource[Selectdate].timeOne, '08:00-09:00')} className={codesource[Selectdate].timeOne == 0 ? style.nonumber : time == 0 ? style.Selected : ''}>
                                                        <p>08:00-09:00</p>
                                                        <p>余{codesource[Selectdate].timeOne}</p>
                                                    </li>
                                                    <li onClick={() => selectTime(1, codesource[Selectdate].timeTwo, '09:00-10:00')} className={codesource[Selectdate].timeTwo == 0 ? style.nonumber : time == 1 ? style.Selected : ''}>
                                                        <p>09:00-10:00</p>
                                                        <p>余{codesource[Selectdate].timeTwo}</p>
                                                    </li>
                                                    <li onClick={() => selectTime(2, codesource[Selectdate].timeThree, '10:00-11:00')} className={codesource[Selectdate].timeThree == 0 ? style.nonumber : time == 2 ? style.Selected : ''}>
                                                        <p>10:00-11:00</p>
                                                        <p>余{codesource[Selectdate].timeThree}</p>
                                                    </li>
                                                    <li onClick={() => selectTime(3, codesource[Selectdate].timeFour, '11:00-12:00')} className={codesource[Selectdate].timeFour == 0 ? style.nonumber : time == 3 ? style.Selected : ''}>
                                                        <p>11:00-12:00</p>
                                                        <p>余{codesource[Selectdate].timeFour}</p>
                                                    </li>
                                                </ul>
                                        }

                                    </div>
                                    <div className={style.morning}>
                                        <div className={style.timetitle}>
                                            <span className={style.time} >下午（14:00-18:00）</span>
                                            <span className={style.registertype}>挂号种类：{doctorlist[doctor].call}号</span>
                                            <span className={style.money}>￥{doctorlist[doctor].price.toFixed(2)}</span>
                                        </div>
                                        {
                                            codesource[Selectdate] == undefined ? <Empty style={{
                                                display:'flex',
                                                flexDirection:'column',
                                                alignItems:'center',
                                                height:'100%',
                                                marginTop:10
                                            }} imageStyle={{width:50,height:'auto'}}/>
                                                :
                                                <ul className={style.timebox}>
                                                    <li onClick={() => selectTime(4, codesource[Selectdate].timeFive, '14:00-15:00')} className={codesource[Selectdate].timeFive == 0 ? style.nonumber : time == 4 ? style.Selected : ''}>
                                                        <p>14:00-15:00</p>
                                                        <p>余{codesource[Selectdate].timeFive}</p>
                                                    </li>
                                                    <li onClick={() => selectTime(5, codesource[Selectdate].timeSix, '15:00-16:00')} className={codesource[Selectdate].timeSix == 0 ? style.nonumber : time == 5 ? style.Selected : ''}>
                                                        <p>15:00-16:00</p>
                                                        <p>余{codesource[Selectdate].timeSix}</p>
                                                    </li>
                                                    <li onClick={() => selectTime(6, codesource[Selectdate].timeSeven, '16:00-17:00')} className={codesource[Selectdate].timeSeven == 0 ? style.nonumber : time == 6 ? style.Selected : ''}>
                                                        <p>16:00-17:00</p>
                                                        <p>余{codesource[Selectdate].timeSeven}</p>
                                                    </li>
                                                    <li onClick={() => selectTime(7, codesource[Selectdate].timeEight, '17:00-18:00')} className={codesource[Selectdate].timeEight == 0 ? style.nonumber : time == 7 ? style.Selected : ''}>
                                                        <p>17:00-18:00</p>
                                                        <p>余{codesource[Selectdate].timeEight}</p>
                                                    </li>
                                                </ul>
                                        }

                                    </div>
                                </div>
                            </div>
                    }
                    
                </div>
            </div>
            {/* 结算栏 */}
            <div className={style.settlement}>
                <div className={style.registerinfo}>
                    <p>
                        挂号种类：
                        <span>{doctorlist[doctor].call}号</span>
                    </p>
                    <p>
                        挂号费用：
                        <span>￥{doctorlist[doctor].price.toFixed(2)}</span>
                    </p>
                </div>
                <div className={style.submittbox}>
                    <Button onClick={() => reset()} style={{ width: 61, height: 32 }}>重置</Button>
                    <Button type="primary"  onClick={() => confirm()} style={{ height: 32, borderRadius: 5, marginLeft: 15 }}>确认挂号</Button>
                </div>
            </div>
        </>
    );
}

export default Outpatientregistration;